<template> 
  <div class="container">
    <Category title="美食" >
      <img slot="center" src="https://www.lingchen1642.top/content/images/size/w2000/2021/12/1-1.jpg">
      <a slot="footer" href="https://www.baidu.com">更多美食</a>
    </Category> 

    <Category title="游戏" >
      <ul slot="center">
        <li v-for="(g, index) in games" :key="index">{{g}}</li> 
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com">单击游戏</a>
        <a href="https://www.baidu.com">网络游戏</a>
      </div>
    </Category> 

    <Category title="电影" >
      <video slot="center" controls src="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=102&spm_id_from=pageDriver"></video>
      <template v-slot:footer>
        <div class="foot">
        <a href="https://www.baidu.com">经典</a>
        <a href="https://www.baidu.com">热门</a>
        <a href="https://www.baidu.com">推荐</a>
      </div>
      <h4>欢迎哈哈哈哈！</h4>
      </template>
    </Category>
  </div> 
</template>

<script>
 
  import Category from './components/Category' 
  
  export default {
    name:'App', 
    components:{Category},
    data(){
      return {
        foods:['火锅', '烧烤', '小龙虾', '牛排'],
        games:['刺激战场', '穿越火线', '开心消消乐', '英雄联盟'],
        films:['《黑客帝国》', '《功夫》', '《无双》', '《战狼》'],
      }
    }
  }
</script>

<style>
  .container, .foot, h4{
    display: flex;
    justify-content: space-around;
  }
  img, video {
    width: 100%;
  } 
</style>
 